<template>
	<view>
		<view class="goods-item" v-for="(item, index) in dataList" :key="index" @click="clickGoodsItem(item)">
			<view class="left-img">
				<image class="goods-img" :src="baseUrl + item.goodImg" mode="aspectFill" />
			</view>
			<view class="goods-content">
				<view class="goods-name">{{ item.goodName }}</view>
				<view class="sale-num" v-if="showSale">月售{{ item.totalSellCount }}</view>
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view class="price"><text
							class="icon">￥</text>{{ userInfo.isMember && userInfo.isMember == 2? item.memberPrice : item.retailPrice }}
					</view>
					<view class="price" v-if="item.counts<=0">
						售空
					</view>
				</view>
				<view class="update-btn">
					<!-- <view class="minus-btn" v-if="item.carNum">
            <image
              class="btn-img"
              :src="baseIconUrl + 'icon_del.png'"
              mode="aspectFill"
            />
          </view> -->
					<!-- <view class="number" v-if="item.carNum">x {{ item.carNum }}</view> -->
					<!-- <view class="add-btn">
            <image
              class="btn-img"
              :src="baseIconUrl + 'icon_add.png'"
              mode="aspectFill"
            />
          </view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl,
		baseImgUrl,
		baseIconUrl
	} from '@/config'
	export default {
		name: 'GoodsListComponent',

		data() {
			return {
				baseUrl,
				dataList: [],
				userInfo: {},
				baseImgUrl,
				baseIconUrl
			}
		},
		props: {
			goodsList: {
				type: Array,
				default: []
			},
			showSale: {
				type: Boolean,
				default: true
			}
		},
		watch: {
			goodsList: {
				handler(newVal, oldVal) {
					this.dataList = uni.$u.deepClone(newVal)
				},
				deep: true
			}
		},
		created() {
			this.dataList = uni.$u.deepClone(this.goodsList)
			const userInfo = this.$store.getters.userInfo
			if (Object.keys(userInfo).length > 0) this.userInfo = userInfo
		},
		methods: {
			clickGoodsItem(item) {
				if (item.counts > 0) {
					console.log('看看', item)
					this.$emit('clickGoodsItem', item)
				}

			}
		}
	}
</script>
<style lang="scss" scoped>
	.goods-item {
		display: flex;
		padding: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 12rpx;
		background-color: #FFF;

		.left-img {
			width: 140rpx;
			height: 140rpx;
			border-radius: 8rpx;
			overflow: hidden;

			.goods-img {
				width: 100%;
				height: 100%;
			}
		}

		.goods-content {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: relative;
			flex: 1;
			margin-left: 10rpx;

			.goods-name {
				font-size: 26rpx;
				font-weight: 500;
			}

			.sale-num {
				margin: 10rpx 0 12rpx;
				font-size: 20rpx;
				color: #808080;
			}

			.price {
				font-size: 26rpx;
				color: #EB2727;

				.icon {
					font-size: 20rpx;
				}
			}

			.number {
				margin-left: 25rpx;
				margin-right: 25rpx;
			}

			.update-btn {
				position: absolute;
				right: 0;
				bottom: 20rpx;
				display: flex;
				align-items: center;

				.minus-btn,
				.add-btn {
					width: 40rpx;
					height: 40rpx;

					.btn-img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>